<template>
	<view :disabled="codeDisAbeld" @click="requestSendCode" class="btn-code"
		:class="{'btn-code-disable': codeDisAbeld}">{{codeText}}</view>
</template>

<script>
	export default {
		name: "zy-button-code",
		data() {
			return {
				codeDisAbeld: false,
				codeText: '获取验证码',
			};
		},
		props:{
			account:{
				type:String
			}
		},
		methods: {
			async requestSendCode() {
				let param = {
					phoneNumbers: this.account,
					sendType: '1',
					areaCode: '+86'
				};
				uni.$http.post('/api/sendSms', param)
					.then(res => {
						this.countdown();
						this.$common.showToast('短信已发送')
					})
			},
			countdown() {
				let seconds = 60;
				this.codeDisAbeld = true;
				let timer = setInterval(() => {
					seconds--;
					this.codeText = seconds + 's';
					if (seconds === 0) {
						clearInterval(timer);
						this.codeText = '获取验证码';
						this.codeDisAbeld = false;
					}
				}, 1000);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.btn-code {
		background-image: linear-gradient(to right, #f2ca97, #e7a080);
		border-top-right-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		width: 150rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #532100;
		font-size: 24rpx;
		opacity: 1;
	}

	.btn-code-disable {
		opacity: 0.5;
	}
</style>